.site-style__form,
.site-style__form-wrapper {
	@include breakpoint-deprecated( '>660px' ) {
		display: flex;
	}
}

.site-style__form {
	margin: auto;
	max-width: 480px;
	background-color: var( --color-surface );

	@include breakpoint-deprecated( '<660px' ) {
		// On small screens the form
		// slightly resembles a card
		box-shadow: 0 5px 5px -3px rgba( 0, 0, 0, 0.2 ),
					0 8px 10px 1px rgba( 0, 0, 0, 0.14 ),
					0 3px 14px 2px rgba( 0, 0, 0, 0.12 );
	}

	@include breakpoint-deprecated( '>660px' ) {
		max-width: 100%;
		padding: 0 4px;
		border-radius: 5px;
	}

	.site-style__fieldset {
		margin: 0;
	}
}

.site-style__option-label {
	cursor: pointer;
	// Get things to line up.
	&.form-label {
		display: inline-block;
		margin-bottom: 0;
	}
	text-align: center;

	// Default to a white background, but
	// some styles override it below.
	background: var( --color-surface );

	// Transition all the things!
	transition: all 0.15s ease-in-out;

	@include breakpoint-deprecated( '<660px' ) {
		width: 50%;
		padding: 16px 8px;
		border-bottom: 1px solid var( --color-neutral-20 );

		// This fixes an annoyance with using
		// display: inline-block above.
		&.form-label {
			margin-bottom: -5px;
		}

		// Make the SVGs a little bigger since
		// we've got the room.
		svg {
			// This should prolly go somewhere else
			transform: scale( 1.4 );
		}
	}

	@include breakpoint-deprecated( '>660px' ) {
		// Make 'em feel like buttons.
		cursor: pointer;
		border: 1px solid var( --color-neutral-20 );
		border-radius: 3px;

		// Shorter names can be too small, so
		// we give 'em a min-width.
		min-width: 130px;

		// Add spacing between the buttons.
		margin-right: 4px;

		// Give the SVGs a little room
		// to breath.
		padding: 4px;

		// Prolly a better way to do
		// this positioning.
		position: relative;
		top: 3px;
	}

	&.is-checked,
	&.is-checked:hover {
		border-color: var( --color-accent-light );
		// A nice big border for the bigger
		// buttons on small screens.
		box-shadow: inset 0 0 0 6px var( --color-accent-light );
		@include breakpoint-deprecated( '<660px' ) {
			// This should prolly go somewhere else
			svg {
				transform: scale( 1 );
			}
		}

		@include breakpoint-deprecated( '>660px' ) {
			// On bigger screens the border
			// gets smaller.
			box-shadow: inset 0 0 0 2px var( --color-accent-light );

			svg {
				transform: scale( 0.9 );
			}
		}
	}

	&:hover {
		background-color: var( --color-neutral-0 );
	}

	input[type='radio'] {
		position: absolute;
		left: -10000px;
		top: -10000px;
		overflow: hidden;
	}

	svg {
		display: block;
		margin: auto;
		cursor: pointer;
		// Make the scaling transform
		// transition between states.
		transition: transform 0.1s ease-in-out;
	}

	// Sophisticated and Calm get special
	// background colors, cause they special.
	&.site-style__variation-sophisticated {
		background-color: #080808;
	}

	&.site-style__variation-calm {
		background-color: #faf8f5;
	}

	&:focus {
		border-color: var( --color-accent-light );
		background-color: var( --color-neutral-0 );
	}

}

.site-style__submit-wrapper {
	align-self: center;

	.button {
		width: auto;
		padding: 8px;

		.gridicon {
			height: 24px;
			width: 24px;
		}
	}

	@include breakpoint-deprecated( '<660px' ) {
		padding: 8px;

		.button {
			position: static;
			width: 100%;
		}
	}
}

.site-style__submit-wrapper {
	text-align: center;
}

// Gotta figure out how to port this
// to the new markup (no span anymore)
.accessible-focus .site-style__option-label input[type='radio']:focus + span {
	outline: 1px solid var( --color-link-dark );
}
